<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结算单状态" prop="clearingStatus">
            <el-select
              v-model="queryParams.clearingStatus"
              placeholder="请选择结算单状态"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in jsztOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
            <el-form-item label="销控区域" prop="pinControl">
              <el-select
                v-model="queryParams.pinControl"
                placeholder="请输入销控区域"
                clearable
                size="small"
                style="width: 240px"
              >
                <el-option
                  v-for="dict in xkqyOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <div class="search-btn">
          <el-button
            type="primary"
            icon="el-icon-download"
            size="mini"
            @click="checkOut"
          >导出</el-button>
          <el-button
            type="primary"
            icon="el-icon-check"
            size="mini"
            @click="clearing"
          >批量结算</el-button>
        </div>

        <el-table v-loading="loading" ref="table" :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="结算单编号" align="center" prop="clearingNumber" :show-overflow-tooltip="true" />
          <el-table-column label="订单编号" align="center" prop="orderNumber" :show-overflow-tooltip="true" />
          <el-table-column label="结算单金额" align="center" prop="clearingAmount" :show-overflow-tooltip="true" />
          <el-table-column label="结算单状态" align="center" prop="clearingStatus" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ selectDictLabel(jsztOptions, scope.row.clearingStatus) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结算人员" align="center" prop="settlementClerkUser" :show-overflow-tooltip="true" />
          <el-table-column label="结算时间" align="center" prop="clearingTime" :show-overflow-tooltip="true" />
          <el-table-column label="配送地址" align="center" prop="dispatchingAddress" :show-overflow-tooltip="true" />
          <el-table-column label="销控区域" align="center" prop="pinControl" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ setPinControl(xkqyOptions, scope.row.pinControl) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" align="center" prop="placeOrderTime" :show-overflow-tooltip="true" />
          <el-table-column label="下单人员" align="center" prop="clearingUser.nickName" :show-overflow-tooltip="true" />
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <el-dialog title="导出" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
               destroy-on-close  width="30%">
      <el-form :model="formData" ref="formData" :inline="true" label-width="100px">
        <el-form-item label="销控区域" prop="pinControl" :rules="[validator.required]">
          <el-select
            v-model="formData.pinControl"
            placeholder="请输入销控区域"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in xkqyOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="结算单状态" prop="clearingStatus">
          <el-select
            v-model="formData.clearingStatus"
            placeholder="请选择结算单状态"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in jsztOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="formDateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <p style="margin: 0;color: red;">下单时间不填默认本月数据</p>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCheckOutDialog">取 消</el-button>
        <el-button type="primary" @click="submitCheckOut">导 出</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getStatementOrderPage, getClearing} from '@/api/order-management/statementOrder';
  import GLOBAL from '@/config/config';
  import validator from '@/utils/validateList'
  export default {
    name: "statementOrderPage-list",
    data() {
      return {
        loading: false,
        tableData: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          placeEndDate: undefined,
          placeStartDate: undefined,
          pinControl: undefined,
          allocationStatus: undefined
        },
        validator: validator,
        GLOBAL: GLOBAL,
        dateRange: [],
        selectTableData: [],
        xkqyOptions: [],
        jsztOptions: [],
        total: 0,
        dialogVisible: false,
        formData: {},
        formDateRange: []
      }
    },
    created() {
      this.getList();
      this.getDicts("fo_control_area").then(response => {
        this.xkqyOptions = response.data;
      });
      this.getDicts("fo_clearing_status").then(response => {
        this.jsztOptions = response.data;
      });
    },
    methods: {
      getList() {
        this.loading = true;
        getStatementOrderPage(this.dateRangeAdd(this.queryParams, this.dateRange)).then(response => {
          this.tableData = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.dateRange = [];
        this.handleQuery();
      },
      handleSelectionChange(data) {
        this.selectTableData = data;
        console.log(this.selectTableData)
      },
      //批量结算
      clearing() {
        if (this.selectTableData.length > 0) {
          let num = 0;
          for (let i = 0; i < this.selectTableData.length; i++) {
            if (this.selectTableData[i].clearingStatus !== '1') {
              num += 1;
            }
          }
          if (num !== 0) {
            this.$notify({
              title: '警告',
              message: `只有待结算的数据才能被结算`,
              type: 'warning'
            });
            return false;
          }
          getClearing({
            ids: this.selectTableData.map(item => item.id)
          }).then(response => {
            if (response) {
              this.$notify({
                title: '成功',
                message: `批量结算成功`,
                type: 'success'
              });
              this.$refs.table.clearSelection();
              this.resetQuery();
            }
          });
        } else {
          this.$notify({
            title: '警告',
            message: `请选择至少一个数据`,
            type: 'warning'
          });
        }
      },
      //导出
      checkOut() {
        this.dialogVisible = true;
      },
      closeCheckOutDialog() {
        this.formData = {};
        this.formDateRange = [];
        this.dialogVisible = false;
      },
      submitCheckOut() {
        this.$refs['formData'].validate(valid => {
          if (valid) {
            let lastUrl = this.GLOBAL.MAIN_SERVER + `/order-center/fo/clearing/public/exportOne/?&pinControl=${this.formData.pinControl}`;
            let placeStartDate;
            let placeEndDate;
            if (this.formDateRange) {
              placeStartDate = this.changeDate(this.formDateRange).placeStartDate;
              placeEndDate = this.changeDate(this.formDateRange).placeEndDate;
              lastUrl += `&placeStartDate=${placeStartDate}&placeEndDate=${placeEndDate}`;
            }
            if (this.formData.clearingStatus) {
              lastUrl += `&clearingStatus=${this.formData.clearingStatus}`;
            }
            console.log(lastUrl);
            window.open(lastUrl);
            this.closeCheckOutDialog();
          }
        })
      },
      changeDate(dateRange) {
        if (null != dateRange && '' != dateRange) {
          return {
            placeStartDate: dateRange[0],
            placeEndDate: dateRange[1]
          }
        }

      },
      //时间处理
      dateRangeAdd(params, dateRange) {
        var search = params;
        search.placeStartDate = "";
        search.placeEndDate = "";
        if (null != dateRange && '' != dateRange) {
          search.placeStartDate = this.dateRange[0];
          search.placeEndDate = this.dateRange[1];
        }
        return search;
      }
    }
  };
</script>

<style scoped lang="scss">
  .search-btn {
    text-align: right;
    margin: 10px 0;
  }
</style>
